<template>
  <div class="screen-center">
    <div class="screen-left">
      <div class="card-left">
        <!--监控预警-->
        <monitoringEarlyWarning/>
      </div>
      <div class="card-left">
        <!--预警分析-->
        <earlyWarningAnalysis/>
      </div>
    </div>
    <div class="screen-map-box">
      <screenMap></screenMap>
    </div>
    <div class="screen-right">
      <div class="card-right" v-if="true">
        <!--物流城市方向-->
        <logisticsCity/>
      </div>
      <div class="card-right" v-if="true">
        <!--城市物流流量排行榜TOP10-->
        <logisticsCityRanking/>
      </div>
    </div>
  </div>
</template>

<script>
import earlyWarningAnalysis from '../screenLeft/earlyWarningAnalysis.vue'
import screenMap from '../screenMap/screenMap.vue'
import monitoringEarlyWarning from '../screenLeft//monitoringEarlyWarning.vue'
import logisticsCity from '../screenRight/logisticsCity.vue'
import logisticsCityRanking from '../screenRight/logisticsCityRanking.vue'
export default {
  name: "screenCenter",
  props: {},
  components: {
    screenMap,
    earlyWarningAnalysis,
    monitoringEarlyWarning,
    logisticsCity,
    logisticsCityRanking
  },
  data () {
    return {

    };
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {
  },
  methods: {},

};
</script>

<style lang="scss" scoped>
@import "../../scss/common";

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.screen-center {
  flex: 1;
  display: flex;
  padding: 0 16px;

  .screen-left {
    font-size: px-to-rem(16px);
    width: px-to-rem(430px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .card-left {
      height: calc(50% - 10px);
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      border: 1px solid #0770b0;
    }
  }

  .screen-map-box {
    flex: 1;
    //border: 1px solid #0770b0;
    //border-radius: 8px;
  }

  .screen-right {
    width: px-to-rem(430px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .card-right {
      height: calc(50% - 10px);
      display: flex;
      flex-direction: column;
      border: 1px solid #0770b0;
      border-radius: 8px;
    }
  }

}
</style>
